<!doctype html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css" type="text/css">
        <link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/resources/bootstrap/css/bootstrap.min.css" type="text/css">
        <link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/resources/layout.css" type="text/css">
        <link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
        <script src="http://openlayers.org/en/v3.0.0/build/ol.js" type="text/javascript"></script>
        <style>
        .map {
        height: 800px;
        width: 100%;
        }
        </style>
        <title>OpenLayers 3</title>
    </head>
    <body>
        <h2>My Map</h2>
        <div id="map" class="map"></div>
        <script src="http://openlayers.org/en/v3.0.0/examples/jquery.min.js" type="text/javascript"></script>
        <script src="http://openlayers.org/en/v3.0.0/resources/example-behaviour.js" type="text/javascript"></script>
        <script type="text/javascript">
        var projection = ol.proj.get('EPSG:3857');

        var raster = new ol.layer.Tile({
        source: new ol.source.MapQuest({layer: 'sat'})
        });

        var vector = new ol.layer.Vector({
        source: new ol.source.KML({
        projection: projection,
        url: '/kml/spna'
        })
        });
        var map = new ol.Map({
        layers: [raster, vector],
        target: document.getElementById('map'),
        view: new ol.View({
        center: [4996970.8463461736, 6309807.853963373],
        projection: projection,
        zoom: 7
        })
        });
        var displayFeatureInfo = function(pixel) {
        var features = [];
        map.forEachFeatureAtPixel(pixel, function(feature, layer) {
        features.push(feature);
        });
        if (features.length > 0) {
        var info = [];
        var i, ii;
        for (i = 0, ii = features.length; i < ii; ++i) {
        info.push(features[i].get('name'));
        }
        document.getElementById('info').innerHTML = info.join(', ') || '(unknown)';
        map.getTarget().style.cursor = 'pointer';
        } else {
        document.getElementById('info').innerHTML = '&nbsp;';
        map.getTarget().style.cursor = '';
        }
        };
        map.on('click', function(evt) {
        displayFeatureInfo(evt.pixel);
        });

        var exportKMLElement = document.getElementById('export-kml');
        if ('download' in exportKMLElement) {
        var vectorSource = (vector.getSource());
        exportKMLElement.addEventListener('click', function(e) {
        if (!exportKMLElement.href) {
        var features = [];
        vectorSource.forEachFeature(function(feature) {
        var clone = feature.clone();
        clone.setId(feature.getId());  // clone does not set the id
        clone.getGeometry().transform(projection, 'EPSG:4326');
        features.push(clone);
        });
        var node = new ol.format.KML().writeFeatures(features);
        var string = new XMLSerializer().serializeToString(
        /** type {Node} */ (node));
        var base64 = exampleNS.strToBase64(string);
        exportKMLElement.href =
        'data:application/vnd.google-earth.kml+xml;base64,' + base64;
        }
        }, false);
        } else {
        var info = document.getElementById('no-download');
        /**
        * display error message
        */
        info.style.display = '';
        }
        </script>

        <div class="container-fluid">

            <div class="row-fluid">
                <div class="span12">
                    <div id="map" class="map"></div>
                </div>
            </div>

            <div class="row-fluid">

                <div class="span4">
                    <h4 id="title">KML example</h4>
                    <p id="shortdesc">Example of using the KML source.</p>
                    <div id="docs">
                        <p>See the <a href="kml.js" target="_blank">kml.js source</a> to see how this is done.</p>
                    </div>
                    <div id="tags">KML</div>
                </div>
                <div class="span4 offset4">
                    <div id="info" class="alert alert-success">
                            &nbsp;
                    </div>
                </div>

            </div>

        </div>

    </body>
</html>
